<template>
  <div class="project-container" >
     <div class="header" >
       <div>
         <i class="el-icon-star-on project-header-icon" ></i><span>快捷操作</span>
       </div>
       <div class="project-header-all" ><i class="el-icon-s-tools" ></i></div>
     </div>
     <div class="body" >
       <div class="card" >
         <div class="card-icon-a" ><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc" >主控台</div>
       </div>
       <div class="card" >
         <div class="card-icon-b"><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc">主控台</div>
       </div>
       <div class="card" >
         <div class="card-icon-c"><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc">主控台</div>
       </div>
       <div class="card" >
         <div class="card-icon-d"><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc">主控台</div>
       </div>
       <div class="card" >
         <div class="card-icon-e"><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc">主控台</div>
       </div>
       <div class="card" >
         <div class="card-icon-f"><i class="el-icon-s-platform" ></i></div>
         <div class="card-desc">主控台</div>
       </div>
     </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs
} from "vue";
export default {
  name: "sh-shortcart",
  setup() {
    const state = reactive({

    });
    return {
      ...toRefs(state)
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variable.scss";
span{
  padding: 0 5px;
}
.project-container{
  display: flex;
  flex-direction: column;
  background-color: $sidebar-bg;
  margin-top: 20px;
  width: calc((100vw - 256px - 34px - 24px - 20px) * 0.35);
  border: 1px solid $sidebar-border;
  .header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom:1px solid $sidebar-line;
    padding: 10px 20px;
    .project-header-icon{
      color: $red-weight;
      background-color:rgba($color: $red-light, $alpha: .4) ;
      padding: 5px;
      border-radius: 50%;
    }
    .project-header-all{
      color: $black-light;
    }
  }
  .body{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
    .card{
      width: 30%;
      height: auto;
      margin: 10px 0;
      font-size: 20px;
      .card-icon-a{
        color:$green-weight;
      }
      .card-icon-b{
        color: $blue-weight;
      }
      .card-icon-c{
        color: $orange-weight;
      }
      .card-icon-d{
        color: $purple-weight;
      }
      .card-icon-e{
        color: $red-weight;
      }
      .card-icon-f{
        color: $cyan-weight;
      }
      .card-desc{
        font-size: 14px;
      }
    }
  }
}
</style>